<template>
  <div style="border: 1px solid red">
    <h1>aa页面显示的内容</h1>
    <h1>{{ msgId }},{{ msgName }}</h1>
    <router-link to="/a/aa/aaa">连接到aaa页面</router-link>
    <Button @click="toAAA">跳转到aaa组件</Button>
    <router-view></router-view>
  </div>
</template>

<script>
//导出单文件组件
export default {
  name: "a2",
  data() {
    return {
      msgId: "",
      msgName: "",
    };
  },
  methods: {
    toAAA() {
      this.$router.push({
        name: "aaa",
        params: {
          id: 249,
          name: 'zhaoliu',
        },
      },()=>{});
    },
  },
  created() {
    console.log(this);
    console.log(this.$route);
    console.log(this.$route.query);
    console.log(this.$route.query.id);
    console.log(this.$route.query.name);
    this.msgId = this.$route.query.id;
    this.msgName = this.$route.query.name;
  },
};
</script>

<style>
h1 {
  color: blue;
}
</style>